<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transform 动画学习</title>
	<style type="text/css">

      .outer{
      	width: 100px;
      	height: 100px;
      	background-color: orange;
      	border:5px solid red;
      	transform: rotate(45deg);
      	margin-top: 50px;
      }

      .inner{
      	height: 100%;
      	background-color: #EEE;
      	transform: scale(0.5) translate(30px,50px)  skew(-5deg,-5deg);
      }

      .mytransition{
      	margin-top: 100px;
      	height: 200px;
      	width: 200px;
      	background-color: yellow;
      }

      .mytransition:hover{
		margin-top: 50px;
      	height: 350px;
      	width: 50px;
      	background-color: red;
      	transition-property:all;
		transition-duration: 2.5s;
		transition-timing-function: cubic-bezier(0.9, -0.2, 0.58, 1);
		transition-delay: .1s;
      }


      .a1{
      	-webkit-transform:translate(60px);
      	-webkit-animation:animations 2s ease-out;
      	-webkit-animation-iteration-count:infinite;

      }
      @-webkit-keyframes animations{
      	0%{-webkit-transform:translate(0);opacity:0;}
      	50%{-webkit-transform:translate(30px);opacity:1;}
      	70%{-webkit-transform:translate(35px);opacity:1;}
      	100%{-webkit-transform:translate(60px);opacity:0;}
      }



	</style>
</head>
<body>

 <div class="outer">
 	 <div class="inner">测试</div>
 </div>

<hr/>

<div class="mytransition">
	<div class="a1">
		我是动画
	</div>
</div>
	
</body>
</html>